<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-26 13:26:44
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-29 14:46:35
 * @FilePath: /tea-garden-web/src/components/component-line-chart.vue
 * @Description: 折线图
-->
<template>
  <div id="line-chart">
  </div>
</template>

<script>
import { Chart } from '@antv/g2'

export default {
  data () {
    return {
      chart: null
    }
  },
  props: {
    data: {
      type: Array,
      default: function () {
        return []
      }
    },
    valueRange: {
      type: Object,
      default: function () {
        return {
          min: 0,
          max: 6
        }
      }
    }
  },
  watch: {
    data () {
      if (this.chart) {
        const data = this.data.map(item => {
          return {
            name: item.createTime,
            value: item.level
          }
        })
        console.log(data)
        this.chart.changeData(data)
      }
    }
  },
  methods: {
    initChart () {
      this.chart = new Chart({
        container: 'line-chart',
        autoFit: true,
        height: 225
      })
      const { min, max } = this.valueRange
      this.chart.scale({
        value: { min, max, alias: '指数' },
        name: { sync: true, nice: true }
      })
      const data = this.data.map(item => {
        return {
          name: item.createTime,
          value: item.level
        }
      })
      console.log(data)
      this.chart.data(data)
      this.chart.line().position('name*value').color('#089BAB').size(1)
      this.chart.render()
    }
  },
  mounted () {
    this.initChart()
  },
  beforeUnmount () {
    if (this.chart) {
      this.chart.destroy()
    }
  }
}
</script>

<style>
</style>
